<template>
  <el-dialog :title="!dataForm.id ? '灯光监测新增' : '灯光监测修改'" :close-on-click-modal="false" :visible.sync="visible" center append-to-body fullscreen>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form class="verify-form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="班级名称" prop="className">
            <el-select v-model="dataForm.classId" @change="classChangeHandle" clearable>
              <el-option v-for="item in this.classOptions" :value="item.id" :label="item.fullName" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查日期" prop="checkDate">
            <el-date-picker v-model="dataForm.checkDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="最高照度" prop="blackboardLight">
            <el-input v-model="dataForm.blackboardLight" @change="averageBlackboardComputeHandle" placeholder="最高照度"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最低照度" prop="lowBlackboard">
            <el-input v-model="dataForm.lowBlackboard" @change="averageBlackboardComputeHandle" placeholder="最低照度"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="均匀度" prop="averageBlackboard">
            <el-input v-model="dataForm.averageBlackboard" placeholder="均匀度"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="户外参考光照度" prop="outsideLight">
            <el-input v-model="dataForm.outsideLight" placeholder="户外参考光照度"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="灯管损坏量" prop="lightBad">
            <el-input v-model="dataForm.lightBad" placeholder="灯管损坏量"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="课桌照度值" prop="deskLight">
            <el-input v-model="dataForm.deskLight" placeholder="课桌照度值"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    <search-class v-if="classVisible" ref="classDialog" @refreshForm="getClassData"></search-class>
  </el-dialog>
</template>

<script>
  import { remote } from '@/api/admin/dict'
  import { getObj, addObj, putObj } from '@/api/pvm/checkdata'
  import { getPersonObj } from '@/api/pvm/person'
  import { getUserListByMenu } from '@/api/admin/user'
  import { fetchList } from '@/api/pvm/class'
  import { mapGetters } from 'vuex'

  import { lightLingGetObj, lightLingAddObj, lightLingPutObj } from '@/api/pvm/prevention/lighting'
  import { getClassOptions } from '@/api/pvm/school'

  import SearchClass from '@/views/pvm/checkdata/SearchClass'


  export default {
    data() {
      return {
        visible: false,
        classVisible: false,
        classOptions: [],
        dataForm: {
          id: 0,
          classId: '',
        },
        dataRule: {
          classId: [{required: true, message: '班级名称不能为空', trigger: 'blur' }]
        },
        userOptions: [],
        refractiveStatusOption: [],
      }
    },
    components:{
      SearchClass
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    methods: {
      init(id,form) {
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.dataForm = form
        if(!id){
          this.getClassOption(form.schoolId,form.gradeId)
        }
        this.dataForm.id = id || ''
        this.getUsersList()
        this.visible = true
        this.$nextTick(() => {
          if (this.dataForm.id) {
            lightLingGetObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = Object.assign(form,response.data.data)
                this.getClassOption(this.dataForm.schoolId,this.dataForm.gradeId)
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              lightLingPutObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('修改成功')
                  this.visible = false
                  this.$emit('refreshDataList',this.dataForm.outsideLight)
                }else{
                  this.$message.error(response.data.msg)
                }
              })
            } else {
              lightLingAddObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('添加成功')
                  this.visible = false
                  this.$emit('refreshDataList',this.dataForm.outsideLight)
                }else{
                  this.$message.error(response.data.msg)
                }
              })
            }
          }
        })
      },
      //  根据key值获取url
      getPathByKey(key) {
        let obj = {}
        obj = this.bizData.personTypeData.find(item => {
          if (item.key == key) {
            return item
          }
        })
        if (obj) {
          return obj.value
        }
      },
      //  获取用户列表(销售人员)
      getUsersList() { // key = '1'
        let path = this.getPathByKey('1')
        getUserListByMenu({
          menuUrl: path
        }).then(result => {
          this.userOptions = result.data.data
        })
      },
      // 获取班级列表
      getClassOption(schoolId,gradeId){
        getClassOptions(schoolId,gradeId).then(response => {
          if(response.data.code == '0'){
            this.classOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      classChangeHandle(val){
        let obj = this.classOptions.find(item => {
          return item.id == val
        })
        this.$set(this.dataForm,'className',obj.fullName)
      },
      // 计算均匀度
      averageBlackboardComputeHandle(){
        if(this.dataForm.lowBlackboard && this.dataForm.blackboardLight){
          let averageBlackboard = ((parseFloat(this.dataForm.lowBlackboard)*100) / (((parseFloat(this.dataForm.blackboardLight) + parseFloat(this.dataForm.lowBlackboard)) * 100)/2))
          this.$set(this.dataForm,'averageBlackboard',averageBlackboard.toFixed(2))
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bg-row {
    // background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;

    tr th {
      background-color: #f4f5f7;
    }

    tr th,
    tr td {
      padding: 10px 8px;
      border: solid 1px #e7e7e7;
      text-align: left;
    }

    .miui-table-header td {
      background-color: #7898a8;
      color: #fff;
      text-align: center;
    }

    .miui-table-tbody {
      background-color: #cadee8;
    }
  }
</style>
